<template>
  <div class="page" style="padding:30px;">
    <el-button type="primary" size="default" @click="generalPpt">生成ppt</el-button>
  </div>
</template>

<script>
import PptxGenJS from 'pptxgenjs'

function px2in (num) {
  return num * 7.5 / 720
}

/**
 * SLIDE 3: Super rowspan/colspan demo
 * @param {PptxGenJS} pptx
 */
function genSlide02 (pptx) {
  const slide = pptx.addSlide({ masterName: 'MASTER_SLIDE' })
  slide.addText('各区域哺乳仔猪死亡率分布区间汇总', { x: 0, y: 0.4, w: '100%', fontSize: 24, align: 'center', color: 'ffffff' })
  slide.addText('2021/04/08—2021/04/14', { x: '70%', y: 0.4, w: '30%', fontSize: 14, align: 'center', color: 'ffffff' })

  // let optsRowspan2 = { rowspan: 2, fill: { color: '99FFCC' } }
  // let optsRowspan3 = { rowspan: 3, fill: { color: '99FFCC' } }
  // let optsRowspan5 = { rowspan: 5, fill: { color: '99FFCC' } }
  // let optsColspan2 = { colspan: 2, fill: { color: '9999FF' } }
  // let optsColspan3 = { colspan: 3, fill: { color: '9999FF' } }
  // let optsColspan4 = { colspan: 4, fill: { color: '9999FF' } }
  // let optsColspan5 = { colspan: 5, fill: { color: '9999FF' } }
  // EX 1:
  const tableData = [
    [
      { text: '区域批次数', options: { valign: 'middle' } },
      { text: '0-1%\n批次数', options: { valign: 'middle' } },
      { text: '1-2%\n批次数', options: { valign: 'middle' } },
      { text: '2-3%\n批次数', options: { valign: 'middle' } },
      { text: '3-4%\n批次数', options: { valign: 'middle' } },
      { text: '4-5%\n批次数', options: { valign: 'middle' } },
      { text: '5-10%\n批次数', options: { valign: 'middle' } },
      { text: '10-20%\n批次数', options: { valign: 'middle' } },
      { text: '20-40%\n批次数', options: { valign: 'middle' } },
      { text: '≥40%\n批次数', options: { valign: 'middle' } },
      { text: '期间死亡\n率≥N%\n批次数', options: { valign: 'middle' } },
      { text: '期间死亡\n率≥N%\n占比', options: { valign: 'middle' } },
      { text: '批次总计', options: { valign: 'middle' } },
    ],
    ['豫东', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '25', options: { valign: 'middle', fill: 'E7726F' } },
      '4.30%', '982'],
    ['吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林吉林', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '11', options: { valign: 'middle', fill: 'F1B783' } },
      '4.30%', '982'],
    ['山西山西山西山西山西山西山西山西山西山西山西山西山西山西', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '11', options: { valign: 'middle', fill: 'F1B783' } },
      '4.30%', '982'],
    ['安徽', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '10', options: { valign: 'middle', fill: 'F1B783' } },
      '4.30%', '982'],
    ['山东', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '9', options: { valign: 'middle', fill: 'F9D98D' } },
      '4.30%', '982'],
    ['豫北', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '6', options: { valign: 'middle', fill: 'F9D98D' } },
      '4.30%', '982'],
    ['南阳', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '4', options: { valign: 'middle', fill: 'F9D98D' } },
      '4.30%', '982'],
    ['黑龙江', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '4', options: { valign: 'middle', fill: 'F9D98D' } },
      '4.30%', '982'],
    ['京津翼', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '4', options: { valign: 'middle', fill: 'fbe992' } },
      '4.30%', '982'],
    ['辽宁', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '4', options: { valign: 'middle', fill: 'fbe992' } },
      '4.30%', '982'],
    ['广西', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '1', options: { valign: 'middle', fill: 'fbe992' } },
      '4.30%', '982'],
    ['江苏', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '1', options: { valign: 'middle', fill: 'fbe992' } },
      '4.30%', '982'],
    ['其他区域', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '0', options: { valign: 'middle', fill: '7abc80' } },
      '4.30%', '982'],
    ['总计', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '93', options: { valign: 'middle', fill: '9dc3e6' } },
      '4.30%', '982'],
    ['占比', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '25', options: { valign: 'middle', fill: 'E7726F' } },
      '4.30%', '982'],
    ['辽宁', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '4', options: { valign: 'middle', fill: 'fbe992' } },
      '4.30%', '982'],
    ['广西', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '1', options: { valign: 'middle', fill: 'fbe992' } },
      '4.30%', '982'],
    ['江苏', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '1', options: { valign: 'middle', fill: 'fbe992' } },
      '4.30%', '982'],
    ['其他区域', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '0', options: { valign: 'middle', fill: '7abc80' } },
      '4.30%', '982'],
    ['总计', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '93', options: { valign: 'middle', fill: '9dc3e6' } },
      '4.30%', '982'],
    ['占比', '500', '57', '14', '6', '3', '1', '14', '6', '1',
      { text: '25', options: { valign: 'middle', fill: 'E7726F' } },
      '4.30%', '982'],
  ]

  const taboptions = { x: '3%', y: 1, w: '94%', h: 5.5, margin: 0, fontSize: 14, align: 'center', valign: 'middle', rowH: '1.0', border: { pt: '1', color: '5B9BD5' }, fill: 'ffffff', autoPage: true, autoPageLineWeight: 0.5 }

  slide.addTable(tableData, taboptions)
}

export default {
  data () {
    return {}
  },
  methods: {
    generalPpt () {
      const pptx = new PptxGenJS()
      pptx.layout = 'LAYOUT_WIDE'

      pptx.defineSlideMaster({
        title: 'MASTER_SLIDE',
        background: { color: '000000' },
        objects: [
          { image: { x: px2in(-7), y: px2in(-5), w: 1.458, h: 0.579, path: '/ppt/logo.png' } },
        ],
      })

      const slide1 = pptx.addSlide({ masterName: 'MASTER_SLIDE' })
      slide1.addText('哺乳仔猪批次死亡用药预警分析报告', { x: '0', y: '45%', w: '100%', fontSize: 40, align: 'center', color: 'ffff00' })
      slide1.addText('2021/04/08—2021/04/14', { x: '0', y: '55%', w: '100%', fontSize: 20, align: 'center', color: 'ffffff' })

      // let slide2 = pptx.addSlide({ masterName: 'MASTER_SLIDE' })
      // slide2.addText('各区域哺乳仔猪死亡率分布区间汇总', { x: 0, y: 0.4, w: '100%', fontSize: 24, align: 'center', color: 'ffffff' })
      // slide2.addText('2021/04/08—2021/04/14', { x: '70%', y: 0.4, w: '30%', fontSize: 14, align: 'center', color: 'ffffff' })
      // 生成
      genSlide02(pptx)

      const slide3 = pptx.addSlide({ masterName: 'MASTER_SLIDE' })
      slide3.addShape(pptx.ShapeType.rect, { x: 0, y: 0, w: 13.33, h: 7.5, fill: { color: '66ff99' } })
      slide3.addShape(pptx.ShapeType.rect, { x: 0, y: 0, w: px2in(640), h: px2in(360), fill: { color: 'ff0000' } })
      slide3.addText('哺乳仔猪批次死亡用药预警分析报告', { x: '0', y: 0, w: '100%', fontSize: 40, align: 'left', color: 'ffffff' })
      // 4. 保存
      pptx.writeFile({ fileName: 'Sample Presentation.pptx' })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
